<template>
    <div class="qrcode" ref="qrCodeUrl"></div>
</template>

<script>
  import Vue from 'vue'
 import QRCode from 'qrcodejs2'

  export default {
    name: "QRCodeView",
    data() {
      return {
        link: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      }
    },
    props: {
      text: {
       type: String,
       required: true,
        default: '',
      },
    },
    watch: {
      text: {
        immediate: true,
        handler() {
          
          if (this.text != '' && this.text != null) {
            this.link = this.text
          } else {
           this.text='https://www.baidu.com/'
         }
        },
      },
    },
    mounted: function () {       
        this.creatQrCode();
    },
    methods: {
      
      creatQrCode() {
        this.$nextTick(function () {
          setTimeout(() => {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: this.link,//this.link, // 需要转换为二维码的内容
              width: 100,
              height: 100,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
         }, 500);
     })
    },
    }
  }
</script>